<template>
  <div class="app">
    <myNavbar title="支付宝" backTyep="1"></myNavbar>
    <div class="conter">
      <div class="conter-centre border-bottom Underline">
        <text class="conter-centre-text">{{"姓名"}}</text>
        <input placeholder="请输入收款人姓名" style="height: 107px;width: 300px;margin-left: 40px;" v-model="newPwd">
      </div>
      <div class="conter-below border-bottom Underline">
        <text class="conter-below-text">{{"账号"}}</text>
        <input placeholder="请输入支付宝账号" style="height: 107px;width: 300px;margin-left: 40px;" v-model="confirmPwd">
      </div>
      <div class="conter-up border-bottom Underline">
        <text class="conter-up-text">{{"验证码"}}</text>
        <input placeholder="输入验证码" style="margin-left: 55px;height: 107px;width: 300px" v-model="verifyCode">
        <div>
          <button class="button01" :disabled="disabled" :text="btntxt" @click="sendcode" style="width:200px;height:60px;	 background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));margin-top: 25px;margin-right:25px;border-radius: 10px; "></button>
        </div>
      </div>
      <div class="border-bottom Underline qrcode-wrap">
        <div class="qrcode">
          <text class="qrcode-text">添加收款二维码</text>
          <upload @metaClick="metaClick($event,index)"></upload>
        </div>
      </div>


    </div>
    <button text="确定" style="width: 700px;height: 90px;margin-top: 20px;margin-left: 25px;	 background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));"
            @click="confirmAlter"></button>
    <div class="below">
<!--      <text class="below-text">{{"如当前手机不可用，请联系市场经理或者"}}</text>-->
<!--      <text class="below-txt" @click="toService">{{"联系客服"}}</text>-->
    </div>

  </div>

</template>
<style lang="css" src="../../../../style/common.css" />
<style scoped>
.app {
  flex: 1;
  background-color: #f9f9f9;
}

.conter {
  /*height: 340px;*/
  background-color: #FFFFFF;
  margin-top: 30px;
  margin-left: 20px;
  width: 710px;
}

.conter-up {
  justify-content: space-between;
  flex-direction: row;
}

.conter-up-text {
  font-size: 29px;
  font-weight: 400;
  color: #333333;
  padding: 40px 0 43px 20px;
}


.conter-centre {
  justify-content: flex-start;
  flex-direction: row;
}

.conter-centre-text {
  font-size: 29px;
  font-weight: 400;
  color: #333333;
  padding: 40px 0 43px 20px;
}

.conter-below {
  justify-content: flex-start;
  flex-direction: row;
}

.conter-below-text {
  font-size: 29px;
  font-weight: 400;
  color: #333333;
  padding: 40px 0 43px 20px;
}

.below {
  flex-direction: row;
  justify-content: center;
}

.below-text {
  padding-top: 50px;
  padding-left: 40px;
  font-size: 29px;
  font-weight: 400;
  color: #666666;
}

.below-txt {
  padding-top: 50px;
  /*padding-left: 40px;*/
  font-size: 29px;
  font-weight: 400;
  color: #D1060F;
}
.Underline{
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #eaeaea;
}
.qrcode{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 20px;
  padding-top: 15px;

}
.qrcode-text{
  font-size: 30px;
}
.qrcode-wrap{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.border-bottom{
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #ebf2f0;
}


</style>
<script>
import md5 from 'js-md5';
import myNavbar from "../../../../components/myNavbar/myNavbar";
import {
  resetCPwd,
  sendMsg
} from '../../../../api/user';
import upload from './components/upload/upload.vue'

import {getInfo} from "../../../../api/member.js";

const communication = app.requireModule("eeui/communication");
export default {
  components: {
    myNavbar,upload
  },
  data() {
    return {
      disabled: false,
      time: 0,
      btntxt:"获取验证码",
      verifyCode:"",
      newPwd:"",
      confirmPwd:"",
      username:'',
      mobile:'',
      sendMsg: {},
      resetPwd: {}
      // btntxt: "发送验证码"
    }

  },
  mounted: function () {
    this.username = app.config.params.username
    this.mobile = app.config.params.mobile
    console.error(this.mobile,this.username)
  },
  methods: {
    metaClick(data,index) {
      var _this = this
      _this.evaluationData[index].itemList = []
      if (data.images != []) {
        data.images.forEach(function(item) {
          var itemList = {
            type: 1,
            url: item
          }
          _this.evaluationData[index].itemList.push(itemList)
        })
      }
      if (data.video != []) {
        data.video.forEach(function(item) {
          var itemList = {
            type: 2,
            url: item
          }
          _this.evaluationData[index].itemList.push(itemList)
        })
      }
    },

    getGetInfo() {
      getInfo().then(res => {
        this.mobile = res.data.member.mobile
        // let _userInfo = res.data.userInfo
        // let _userInfo = res.data.member
        //   _userInfo.rmobile = _userInfo.mobile
        // _userInfo.mobile = _userInfo.mobile.replace(/^(\d{3}).*?(\d{4}$)/, "$1****$2")
        // this.mobile = _userInfo.mobile
      })
    },
    getSendMsg() {
      sendMsg({
        tplKey: 'register',
        username: this.mobile //从上一个页面手机号传值（mobile）
      }).then(res => {
        console.info("nakusdahdkuhasdkuahskduash")
        console.info(res)
        if (res.type == "success") {
          eeui.toast({
            message: '验证码已发送'
          })
        }else{
          eeui.toast({
            message: '验证码发送失败，请稍后重试！'
          })
        }
      })
    },


    sendcode() {
      if (this.time == 0) {
        this.getSendMsg()
      }
      this.time = 30;
      this.timer();
    },
    //发送手机验证码倒计时
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.btntxt = this.time + "秒";
        console.warn(this.btntxt)
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        // this.btntxt = '重新发送(' + time + ')';
        this.btntxt = '重新发送'
        this.disabled = false;
      }
    },

    confirmAlter() {
      if(!this.newPwd.length){
        eeui.toast({
          message: '密码不能為空！'
        })
        return
      }
      if(this.newPwd !== this.confirmPwd){
        eeui.toast({
          message: '密码不一致！'
        })
        return
      }
      resetCPwd({},{
        mobile:this.mobile,
        password: md5(this.newPwd),
        verifyCode: this.verifyCode,
        // username: this.username,
        // mchId:this.getGlobalData().mchId,
      }).then(res => {
        // TODO 解析数据
        if (res.type == "success") {
          eeui.toast({
            message: '支付密码修改成功！'
          })
          eeui.closePage()
        }else{
          eeui.toast({
            message: '密码修改失败，请稍后重试！'
          })
        }
      })
    },
    toService() {
      // eeui.openPage({
      // 	url: 'root://pages/my/service',
      // 	statusBarType: 'immersion',
      // 	statusBarStyle: false
      // });
      communication.call('415-736-0000')
    },
  },
  created: function() {
    // this.getSendMsg()
    // this.getresetPwd()
  },
}
</script>
